<template>
  <div class="hc-nav">
    <div
      v-for="item in navItems"
      :key="item.path"
      :class="['nav-item', item.path === currentNav ? 'nav-item-choosed' : '']"
      @click="handleNavClick(item)"
    >
      <img :src="item.path === currentNav ? item.activeIcon : item.icon" alt="" />
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useUserStore } from "/@/stores/userStore";
import imgNavExperiment from "/@/assets/img/nav-experiment.png";
import imgNavExperimentActive from "/@/assets/img/nav-experiment-active.png";
import imgNavReagent from "/@/assets/img/nav-reagent.png";
import imgNavReagentActive from "/@/assets/img/nav-reagent-active.png";
import imgNavTemplate from "/@/assets/img/nav-template.png";
import imgNavTemplateActive from "/@/assets/img/nav-template-active.png";
import imgNavSettings from "/@/assets/img/nav-settings.png";
import imgNavSettingsActive from "/@/assets/img/nav-settings-active.png";
import imgNavLogout from "/@/assets/img/nav-settings.png";
import imgNavLogoutActive from "/@/assets/img/nav-settings-active.png";
const userStores = useUserStore();
const { logout } = userStores;
const { userInfo } = storeToRefs(userStores);
const route = useRoute();
const router = useRouter();
const routePath = route.fullPath.split("/")[1];
const currentNav = ref(`/${routePath}`);
const navItems = [
  {
    name: t("nav.experiment"),
    path: "/experiment",
    icon: imgNavExperiment,
    activeIcon: imgNavExperimentActive,
  },
  {
    name: t("nav.reagent"),
    path: "/reagent",
    icon: imgNavReagent,
    activeIcon: imgNavReagentActive,
  },
  {
    name: t("nav.template"),
    path: "/template",
    icon: imgNavTemplate,
    activeIcon: imgNavTemplateActive,
  },
  {
    name: t("nav.settings"),
    path: "/settings",
    icon: imgNavSettings,
    activeIcon: imgNavSettingsActive,
  },
  {
    name: t("nav.logout"),
    path: "/logout",
    icon: imgNavLogout,
    activeIcon: imgNavLogoutActive,
  },
];

const handleNavClick = (item: any) => {
  if (item.path === "/logout") {
    logout();
    router.push("/");
    return;
  }
  router.push(item.path);
};

watch(
  () => route.fullPath,
  (newRouter) => {
    const path = newRouter.split("/")[1];
    currentNav.value = `/${path}`;
  }
);
</script>
<style lang="scss" scoped>
.hc-nav {
  width: 100px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--hc-nav-background-color);
    cursor: pointer;
    color: var(--hc-nav-text-color);
    font-size: 1.571429rem /* 22/14 */;
    border-right: 1px solid var(--hc-nav-border-color-right);
    border-bottom: 1px solid var(--hc-nav-border-color-bottom);
    &:hover {
      background-color: var(--hc-nav-choosed-background-color);
      color: var(--hc-nav-choosed-text-color);
    }
    img {
      margin-bottom: 0.357143rem /* 5/14 */;
    }
  }
  .nav-item-choosed {
    background-color: var(--hc-nav-choosed-background-color);
    color: var(--hc-nav-choosed-text-color);
  }
}
</style>
